<template>
  <div class="login-container">
    <div class="card">
      <div class="moving-element"></div>
      <div class="card-container">
        <div class="img">
          <div class="logo">
            <img src="@/assets/vue.svg" alt="" />
            <div class="title">Dora</div>
          </div>
          <img src="@/assets/images/collaboration.png" alt="" width="560px" height="420" />
        </div>
        <div class="content">
          <div class="font-bold text-3xl mb-4">welcome Dora</div>
          <div class="text-[#999] text-sm mb-8">登录你的账号, 世界和平(bushi)</div>
          <el-form ref="loginForm" :model="form" :rules="rules">
            <el-form-item prop="account">
              <el-input v-model="form.account" placeholder="用户名" prefix-icon="User"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="form.password"
                type="password"
                placeholder="密码"
                show-password
                autocomplete="new-password"
                prefix-icon="Lock"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="flex justify-between items-center w-full">
                <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                <router-link to="/forget">忘记密码</router-link>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="flex justify-between items-center w-full">
                <el-button class="flex-1" type="primary" @click="submitForm()">登录</el-button>
                <el-button class="flex-1" @click="resetForm()">重置</el-button>
              </div>
            </el-form-item>
          </el-form>
          <!-- <div class="extra-links w-full">
          <router-link to="/register">注册账号</router-link>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElForm, ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import UserStore from "@/stores/modules/user";
import useMenuStore from "@/stores/modules/menu";
import * as Api from "@/api/modules/user";
import { Md5 } from "ts-md5";

const router = useRouter();
const userStore = UserStore();
const menuStore = useMenuStore();

const form = reactive<Api.ReqLoginForm>({
  account: "admin",
  password: "123456"
});
const rememberMe = ref(false);
const loginForm = ref<typeof ElForm | null>(null);

const rules = {
  account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }]
};

const submitForm = () => {
  loginForm.value?.validate(async valid => {
    if (valid) {
      const { data } = await Api.login({ ...form, password: Md5.hashStr(form.password) });
      userStore.setToken(data.token);
      const { data: userInfo } = await Api.getUserInfo();
      userStore.setUserInfo(userInfo);
      await menuStore.getAllMenuTree();
      ElMessage({
        message: "登录成功",
        type: "success"
      });
      router.push("/home");
    }
  });
};

const resetForm = () => {
  loginForm.value?.resetFields();
};

onMounted(() => {
  document.onkeydown = (e: KeyboardEvent) => {
    if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
      submitForm();
    }
  };
});
</script>

<style scoped lang="scss">
.login-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  user-select: none;
}
.login-container::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50vh;
  content: "";
  background: url("../../assets/images/login.svg") no-repeat top center;
  background-size: cover;
  transform: scaleX(-1) scaleY(-1);
}
.login-container::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50vh;
  content: "";
  background: url("../../assets/images/login.svg") no-repeat top center;
  background-size: cover;
}
.login-container > * {
  position: relative;
  z-index: 1;
}
.card {
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  height: 500px;
  padding: 1px;
  overflow: hidden;
  background: transparent;
  .img {
    margin-right: 20px;
    .logo {
      display: flex;
      align-items: center;
      .title {
        margin-left: 10px;
        font-weight: 700;
      }
    }
  }
  .content {
    min-width: 300px;
  }
}
.extra-links {
  display: flex;
  justify-content: space-between;
}
.captcha-img {
  width: 100%;
  cursor: pointer;
}
.card-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background: rgb(var(--el-bg-color), 0.38);
  border: 1px solid rgb(255 255 255 / 20%);
  backdrop-filter: blur(24px);
}
.moving-element {
  position: absolute;
  top: 0;
  left: 10%;
  width: 40px;
  height: 40px;
  background-image: radial-gradient(var(--el-color-primary) 40%, transparent 80%);
  border-radius: 100px;
  transform: translate(-20px, -20px);
  animation: move-around 24s linear infinite;
}

@keyframes move-around {
  0% {
    top: 0;
    left: 0%;
  }
  25% {
    top: 0;
    left: 100%;
  }
  50% {
    top: 100%;
    left: 100%;
  }
  75% {
    top: 100%;
    left: 0%;
  }
  100% {
    top: 0;
    left: 0%;
  }
}
</style>
